<template>
  <div class="drug-prescription-table">
    <div class="table-title">
      <div>{{ info.rxName }}</div>
      <div>
        <el-button type="primary" v-btnPermission="'execute-addInfusionFee'" v-if="execStatus == 1" @click="showDialog = true">注射费</el-button>
      </div>
    </div>
    <div v-for="item,index in info.groupList" :key="index"> 
      <div class="table-type">
        <div>{{ item.groupName }}</div>
        <div>{{ item.usageCodeText }}</div>
        <div>{{ item.frequencyCodeText }}</div>
        <div>{{ item.ivDripRate }}滴/分钟</div>
        <div class="table-type-right" :style="item.execStatus != '3'?'':'margin-right:0'">
          <span class="table-type-count"  v-if="item.execStatus != '3'"  >
            第{{ item.nextTimes }}
           次 /共{{
              item.totalTimes
            }}次</span
          >
          <span class="table-type-count"  v-if="item.execStatus == '3'"  >
            共{{
              item.totalTimes
            }}次</span
          >
          <span class="table-type-divider" v-if="item.execStatus != '3'"></span>
          <span class="table-type-action" v-if="item.execStatus != '3'" v-btnPermission="'execute-addExecRecord'" @click="showExecDialogFunc(item)">
            <span class="table-type-action-text">执行</span>
          </span>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th style="width: 48px">序号</th>
            <th  style="width: 268px">药品</th>
            <th style="width: 248px">用量/次</th>
            <th style="width: 248px">总量</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="items,indexs in item.detailList" :key="indexs"> 
            <td style="width: 48px">{{indexs+1}}</td>
            <td style="width: 268px">{{items.drugName}}

              <span v-if="items.drugCategory != '3'" style="margin-left: 10px;">
                {{ items.drugDosage
                }}{{ items.drugDosageUnitText }}*{{ items.minPackQty }}{{items.minPackUnitText}}/{{
                  items.packUnitText
                }}  
              </span>
              <span v-if="items.drugCategory == '3'" style="margin-left: 10px;">
              {{ items.minPackQty
                }}{{ items.minPackUnitText }}/{{
                  items.packUnitText
                }}
              </span>

            </td>
            <td style="width: 248px">{{items.dosage}}{{items.dosageUnitText}}</td>
            <td style="width: 248px">{{items.totalOutQty}}{{items.totalOutQtyUnitText}}</td>
            <td>{{items.remark}}</td>
          </tr>
        </tbody>
      </table> 
    </div>
  </div>
  <CommonDialog
    v-model:visible="showExecDialog"
    title="执行"
    :width="480"
    @close="showExecDialog = false"
    @confirm="handleExecConfirm"
  >
    <template #body>
      <div style="margin-bottom: 12px; color: #666; font-size: 15px">
         本次为第 {{ infoItem.nextTimes }}
          次 执行，剩余 {{infoItem.totalTimes - infoItem.nextTimes
          }}次。
      </div>
      <el-input
        v-model="execResult"
        type="textarea"
        :rows="3"
        placeholder="执行效果"
        style="width: 100%; margin-bottom: 12px"
      />
      <div style="color: #888; font-size: 14px; margin-top: 0">
        执行人：{{userInfo.userName}}　执行时间：{{userInfo.time}}　
      </div>
    </template>
    <template #footer>
      <el-button type="primary" @click="handleExecConfirm">确认</el-button>
    </template>
  </CommonDialog>
  <CommonDialog
    v-model:visible="showDialog"
    title="注射费"
    :width="420"
    @close="showDialog = false"
    @confirm="handleConfirm"
  >
    <template #body>
      <el-input
        v-model="fee"
        placeholder="请输入大于0的正数"
        style="margin-top: 12px; width: 100%"
        type="number"
      />
    </template>
    <template #desc> 点击确认后将生成收费单 </template>
    <template #footer>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </CommonDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CommonDialog from './CommonDialog.vue';
import {addInfusionFee,addExecRecord} from '@/api/exec/index';
const props = defineProps<{
  info: any;
  orderId: any;
  
  execStatus:any
}>();
const info = props.info;
const showDialog = ref(false);
const showExecDialog = ref(false);
const fee = ref(null);
const execResult = ref('');

const handleConfirm = async() => {
  // 校验输入
  if (!fee.value || Number(fee.value) <= 0) {
    //ElMessage.error('请输入正确的');
    return;
  }

  const data = {
    orderId: props.orderId,
    amount: Number((fee.value * 100).toFixed(2)),
    
  };

  let res = await addInfusionFee(data);
  if (res.code != '200') {
    //ElMessage.error('添加失败');
    return;
  }
  closeDrawer()
  ElMessage({
    type: 'success',
    message: res.msg,
    duration: 2000,
  })
  // 这里可以添加生成收费单的逻辑
  showDialog.value = false;
  // 清空输入
  fee.value = null;
};
//基本信息
const today = new Date()
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const hours = String(today.getHours()).padStart(2, '0');
const minutes = String(today.getMinutes()).padStart(2, '0');
const seconds = String(today.getSeconds()).padStart(2, '0');

const userInfo = ref<any>()

const infoItem = ref<any>({

});
const showExecDialogFunc = (item:any) => {
  infoItem.value = item;

    userInfo.value = {
        userName: getUserInfo().empName,
        time: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
    }
  showExecDialog.value = true;
};
const handleExecConfirm = async() => {
  let data = {
    orderId: props.orderId,
    groupName: infoItem.value.groupName,
    execResult: execResult.value,
  }
  let res = await addExecRecord(data);
  if (res.code != '200') {
    return;
  }
  closeDrawer()
  ElMessage({
    type: 'success',
    message: res.msg,
    duration: 2000,
  })
  // 这里可以添加执行逻辑
  showExecDialog.value = false;
  execResult.value = '';
};


const emit = defineEmits(['closeDrawer']);
const closeDrawer = () => {
  emit('closeDrawer');
};

</script>

<style scoped lang="scss">
.drug-prescription-table {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 #e9e9e9;
  margin: 0;
  overflow: hidden;
  .modal-footer{
    padding:10px 0px;
  }
}
.table-title {
  font-size: 20px;
  font-weight: 500;
  color: #222;
  background: #f8f8f8;
  height: 52px;
  line-height: 52px;
  font-size: 14px;
  background: #f8f8f8;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 17px;
  display: flex;
  justify-content: space-between;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  color: #222;
}
th,
td {
  padding: 12px 8px;
  text-align: left;
  background: #fff;
}
th {
  color: #bdbdbd;
  font-weight: 400;
  font-size: 15px;
  background: #fff;
}
tr:not(:last-child) td {
  border-bottom: 1px solid #f0f0f0;
}
thead th {
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
}
td.highlight,
th.highlight {
  color: #000000;
  font-weight: 500;
}
tr:last-child td {
  border-bottom: none;
}
.highlight_1 {
  font-size: 13px;
  color: #16ada4;
}
.table-type {
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #666;
  padding-left: 14px;
  justify-content: space-between;
}
.table-type > div {
  margin-right: 30px;
}
.table-type-right {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: 14px;
  color: #666;
}
.table-type-count {
  color: #222;
  margin-right: 16px;
}
.table-type-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #e6e6e6;
  margin-right: 16px;
}
.table-type-action {
  display: flex;
  align-items: center;
  color: #16ada4;
  cursor: pointer;
  font-weight: 500;
}
.table-type-action-text {
  margin-left: 4px;
  font-size: 13px;
}
</style>
